<template>
	<view>
		<NavBar title="意见反馈" backTo="prev"></NavBar>
		<view class="type" :style="{marginTop: navBarHeight+'px'}">
			<view class="tip" >
			    1.请选择反馈问题的类型
			</view>
			<radio-group class="radio_group" @change="handleRadioChange">
				 <view class="radio_wrap">
				    <text>预约问题</text>
				    <radio color="#D1A8A8" value="1"></radio>
				</view>
				
				<view class={Styles.radio_wrap}>
				    <text>服务问题</text>
				    <radio  color="#D1A8A8" value="2"></radio>
				</view>
				             
				<view class={Styles.radio_wrap}>
				    <text>收费问题</text>
					<radio color="#D1A8A8" value="3"></radio>
				</view>
			</radio-group>
		</view>
		
		<view class="comment">
		    <view class="tip">2.请填写问题或建议</view>
		    <textarea @input="handleContentInput"></textarea>
		</view>
		
		<view class="submit">
		    <view class="btn" @click="handleSbumit">提交</view>
		</view>

	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue';
	import {Request, getGlobalData} from '@/util.js';
	const navBarHeight = uni.getStorageSync('navBarHeight');
	const domain = getGlobalData('domain');
	const openid = uni.getStorageSync('openid');
	export default {
		components: {
			NavBar,
		},
		data(){
			return {
				navBarHeight: navBarHeight,
				type: null,
				comment: ""
			}
		},
		methods:{
			handleRadioChange(e){
				this.type = e.detail.value;
			},
			handleContentInput(e){
				this.comment = e.detail.value;
			},
			handleSbumit(){
				if(this.type == null){
					uni.showModal({
						content:'请选择反馈类型',
						showCancel:false
					})
				}else if(this.comment == ""){
					uni.showModal({
						content:'请填写问题或建议',
						showCancel:false
					})
				}else{
					 Request(domain+"/client/feedback/submitFeedback",{openid:openid, type:this.type,comment:this.comment}).then((res)=>{
						 if(res.data.code == 200){
							 uni.showModal({
								content:'提交成功，工作不足我们深表歉意，你的建议我们会有专人处理和改进，感谢你的支持！',
								showCancel:false,
								success:function(e){
								    if(e.confirm){
								        uni.switchTab({
				                            url:"/pages/center/index"
		                                })
								    }
								}
							})
						 }
					 })
				}
			}
		},
		
	}
</script>

<style lang="less">
	@import "../../uni.less";
	page{
	    background-color: @background_color;
	}
</style>
<style scoped lang="less">
.type{
    width: 95%;
    height: 430rpx;
    background-color:#fff;
    margin: 0 auto;
    border-radius: 20rpx;
    .tip{
        width: 50%;
        font-size: 28rpx;
        color: #D1A8A8;
        position: relative;
        top:30rpx;
        left:30rpx;
        // border:1rpx solid #000;
    }

    .radio_group{
        position: relative;
        width:90%;
        height:230rpx;
        left:30rpx;
        top:55rpx;
        font-size: 28rpx;
        color:gray;

        .radio_wrap:last-of-type{
            border-bottom:0;
        }
        
        .radio_wrap{
            border-bottom:1rpx solid #f3efef;
            width: 100%;
            margin: 0 auto;
            height: 105rpx;
           
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

      


   
    }

   

}

.comment{
    width: 95%;
    height:400rpx;
    background-color: #fff;
    margin:0 auto;
    margin-top: 20rpx;
    border-radius: 20rpx;
    .tip{
        position: relative;
        top:30rpx;
        left:30rpx;
        font-size: 28rpx;
        color: #D1A8A8;
    }
    Textarea{
        width: 90%;
        margin:0 auto;
        height:300rpx;
        position: relative;
        top:50rpx;
        color:gray;
    }
}

.submit{
    margin-top:30rpx ;
    height: 80rpx;
    .btn{
        width:40%;
        height:100%;
        margin: 0 auto;
        border-radius: 50rpx;
        text-align: center;
        line-height: 80rpx;
        background-color: #d1a8a8;
        color: #fff;
    }
}	
</style>